<template>
	<!-- <div> -->
	<transition name="fade">
	<div id="productinfo" v-if="!showLoading">
	
		<flexbox>
		    <flexbox-item>
		      <yd-slider autoplay="3000">
		          <yd-slider-item v-for="item in topPic" >
		              <img v-bind:src="item" width="100%">
		          </yd-slider-item>
		      </yd-slider>
		    </flexbox-item>
		</flexbox>


		<flexbox style="background-color:#fff;" orient="vertical">
	      	<flexbox-item>
				<div class="name" style="padding:10px;">{{productdata.name}}</div>
		  	</flexbox-item>
		  	<flexbox-item>
			  	<div class="mb5">
					<span class="price ml20">¥ {{productdata.guide_price}}</span>
					<span class="red h3 mr10">起</span>
				 	<span class="tips1" v-if="productdata.profit_state == '1'"> 不可退 </span> 
				 	<span class="tips2" v-if="productdata.profit_state == '0'"> 可退 </span> 
				</div>
		  	</flexbox-item>

		  	<flexbox-item >
				<group gutter="0">
					<cell is-link @click.native="bussinessinfo">
						<span class="h3" slot="title">
							商家信息 
						</span>

						<span class="h4">点击查看</span>
					</cell>

					<cell >
						<span class="h3" slot="title">
							购买须知 
						</span>
						<span class="h4 " slot="inline-desc">
							<div class="mt10" v-html="bn"></div>
						</span>
					</cell>

					<cell >
						<span class="h3" slot="title">
							商品详情 
						</span>
						<span class="h4" slot="inline-desc">
							<div class="mt10 h4" v-for="d in detailarr">
								<template v-if="d.type == 'text'">
									<div v-html="d.value"></div>
								</template>

								<template v-if="d.type == 'image'">
									<img v-lazy="pimg(d.value, 'normal')" width="100%" >
								</template>
							</div>
						</span>
					</cell>
			    </group>
			</flexbox-item>

			<flexbox-item v-show="bussinessVisible">
			<yd-popup  v-model="bussinessVisible" height="50%"
			position="bottom" class="popmodel">
				 <group gutter="0">
					<cell v-for="b in productdata.bussinesslist" >
						<div class="h4" slot="title">
							{{b.bussiness_name}} 
						</div>
						<div class="h5" slot="inline-desc">
				      		电话：{{b.mobile}}
				      	</div>
						<div class="h5" slot="inline-desc">
				      		营业时间：{{b.bussiness_open_time}}
				      	</div>
						<div class="h5" slot="inline-desc">
				      		地址：{{b.address}}
				      	</div>
					</cell>
			    </group>
			</yd-popup>
			</flexbox-item>

		  	<flexbox-item v-show="popupVisible">
		  	<!-- 选择型号 -->
			<yd-popup  v-model="popupVisible" height="70%"
			position="bottom" class="popmodel">
				<div class="mt10 pl10 fl row bb " >
				  	<div class="image fl  mb10">
				  		<img :src="topPic[0]" width="100%" height="100%" >
				  	</div>
				  	<div class="name1 fl pl10">
				  		<div class="h4">{{productdata.name}}</div>

				  		<div class="mt5 h4" v-show="model.attr_id == undefined">
				  		 请选择一个型号 
				  		</div>
				  		<div class="mt5 h4" v-show="model.attr_id != undefined">
				  			已选择：{{model.attr_name}}
				  		</div>

				  		<div class="guide_price mt5 red"
				  		v-show="model.attr_id == undefined"
				  		>{{productdata.guide_price}}<span class="h3"> 起 </span></div>
				  		<div class="guide_price mt5 red"
				  		v-show="model.attr_id != undefined"
				  		>{{model.guide_price}}</div>
				  	</div>
				</div>

				  <div class="mt10 fl row bb" >
				  	<div class="row fl mb10 pl10 h4"> 型号：</div>
				  	<div class="row fl mb10">
					  <div class="model" v-for="m in productmodel"
					  v-on:click="chooseModel(m)"
					  v-bind:class="{ active: model.attr_id == m.attr_id }"
					  >
					  		{{m.attr_name}}
					  </div>
				  	</div>
				  </div>

				<div class="mt10 fl row bb" v-if="productdata.price_type == '1'">
					<pricecalendar class="mb10" v-bind:config="pricecalendardata"
					v-on:chooseday="chooseday"
					> </pricecalendar>
				</div>
				  
				  
				  <div class="mt10 fl row bb" style="height:60px;">
				  	<div class="row fl stock" > 
				  		<div class="pl10 h4 mt10">购买数量：</div>
				  		<div class="count mt5 pl10"
				  		v-show="model.stock_type == '1'"
				  		>库存：{{model.current_stock_num}}</div>
				  	</div>

				  	<div class="fr mt5 pr10">
				  		<count v-bind:config="countpara" ></count>
				  	</div>
				  </div>

				<!-- <div  > -->
	            <yd-button size="large" type="danger" @click.native="next" slot="bottom"
	            style="margin-top:0px;"
	            :disabled="model.attr_id == undefined 
	            || (productdata.price_type == '1' && pricecalendar.id == undefined)">
	            下一步</yd-button>
	            <!-- </div> -->
	        </yd-popup>
		  	</flexbox-item>

		  	<flexbox-item v-show="shareMenuVisible">
			<yd-popup class="shareMenu "
				  v-model="shareMenuVisible"
				  position="bottom">
				  	<div class="mt10 mb30 pl10 pr10">
				  		<div class="mb5 h3">分佣时机：</div>
				  		<span v-if="productdata.profit_state == '1'">
				  			该产品 <strong>不</strong> 可退，用户购买后2分钟内分佣，在分销中心中查询。
				  		</span>
				  		<span v-if="productdata.profit_state == '0'">
				  			该产品 <strong>可以</strong> 退票，用户核销后2分钟内分佣，在分销中心中查询。
				  		</span>
				  		<div class="mt10 mb5 h3">佣金：</div>
				  		<div class="mt5" v-for="m in shareproductmodel">
				  			{{m.attr_name}} : ¥ {{m.profit}}
				  		</div>
				  	</div>

				  	<div class="btn" v-on:click="shareFriend">分享好友/朋友圈</div>

				  	<div class="btn" v-on:click="poster">获取海报</div>

				  	<div class="btn" v-on:click="materiel">获取物料</div>

				  	<div class="btn" v-on:click="productQRCode">产品二维码</div>
				  	<div class="btn"
				  	v-clipboard:copy="shareLink"
				    v-clipboard:success="copyShareLink"
				    v-clipboard:error="onErrorShareLink"
				  	>复制产品链接</div>
				  	
					
			</yd-popup>
		  	</flexbox-item>

			<flexbox-item v-if="productQRCodeVisible">
			<yd-popup class="productQRCode" position="center"
			  v-model="productQRCodeVisible">
			  <div class="bgwhite text-center pt10" style="width:270px; height:520px;">
			  	<poster
			  	
			  	:options="{
			  		img : productdata.img,
			  		qrcode_l : productdata.qrcode_l,
		      		qrcode_t : productdata.qrcode_t,
		      		qrcode_size : productdata.qrcode_size,
		      		wxname_l : productdata.wxname_l,
		      		wxname_t : productdata.wxname_t,
		      		wxname_size : productdata.wxname_size,
		      		wxname_color : productdata.wxname_color,
		      		wxname_length : productdata.wxname_length,
		      		wxname : postername,
		      		data : shareLink,
			  	}"

			  	></poster>

			  	<div class="h2 hui mt15">长按图片保存海报</div>
			  	</div>
				<!-- <div class="text-center">
					<qrcode-vue class=""
						:value="shareLink" 
						:size="200" level="H">
					</qrcode-vue>
				</div> -->
			</yd-popup>
			</flexbox-item>


	  	<!-- 物料 -->
	  	<flexbox-item v-if="materielVisible">
		  	<yd-popup v-model="materielVisible" position="right" width="80%">

		  		<flexbox orient="vertical" class="mb50">
		  			<!-- 产品图片 -->
	      			<flexbox-item>
	      				<p class="h5" style="padding:10px;">点击图片，长按保存至本地</p>
	      				<yd-lightbox>
					        <yd-lightbox-img v-for="item, key in topPic1" 
					        :key="key" :src="item" width="33.3%" ></yd-lightbox-img>
					    </yd-lightbox>
	      			</flexbox-item>

	      			<!-- 推广文字 -->
	      			<flexbox-item v-for="w in words"
		            style="border-bottom:1px solid #eee; padding-bottom:10px;">
		            	<div class="h4" style="padding:10px; ">{{w}}</div>
	            		<div >
	            			<yd-button class="fr mr10" type="hollow"
	            			v-clipboard:copy="w"
						    v-clipboard:success="copyWords"
						    v-clipboard:error="onErrorShareLink"
	            			>点击复制</yd-button>
	            		</div>
	      			</flexbox-item>
	      			
	      		</flexbox>

	      		<div class="footer2 text-center  h2 bgred white"
		            v-on:click="materielVisible = false">
		            返回
	      		</div>

        	</yd-popup>
	  	</flexbox-item>
		</flexbox>


		<flexbox class="footer" :gutter="0">
			<flexbox-item class="text-center red" :span="2" @click.native="gohome" >
				<yd-icon name="home" size=".42rem"></yd-icon>
				<div class="hui h5">首页</div>
			</flexbox-item>
			<flexbox-item class="text-center red" :span="2" @click.native="collection">
				<yd-icon v-if="productdata.iscollection != '0'" 
				name="like" size=".42rem"></yd-icon>
				<yd-icon v-if="productdata.iscollection == '0'" 
				name="like-outline" size=".42rem"></yd-icon>
				<div class="hui h5">收藏</div>
			</flexbox-item>
			<flexbox-item class="text-center red" :span="2" @click.native="goorder">
				<yd-icon name="feedback" size=".42rem"></yd-icon>
				<div class="hui h5">订单</div>
			</flexbox-item>
			<flexbox-item :span="6" >
				<template v-if="productdata.flash_state == '1'">
				<div v-if="checkDate(productdata.start_time)"
				class="buy1 bggreen h3" >
					<div class="mt5">距离开始还有</div>
					<div><yd-countdown :time="productdata.start_time.replace(/-/g,'/')"></yd-countdown></div>
				</div>

				<div v-if="!checkDate(productdata.end_time)"
				class="buy bggreen h2" >
					已结束
				</div>

				<div 
				v-if="!checkDate(productdata.start_time) 
				&& checkDate(productdata.end_time)"
				class="buy1 bgred h3" v-on:click="buy()">
					<div class="mt5">
						<yd-countdown :time="productdata.end_time.replace(/-/g,'/')"></yd-countdown>
					</div>
					<div>立即购买</div>
				</div>
				</template>
				
                <template v-if="productdata.flash_state == '0'">
				<div class="buy bgred h2" v-on:click="buy()">
					立即购买
				</div> 
				</template>
			</flexbox-item>
		</flexbox>


		<flexbox class="share" v-if="userdata.level != 0">
			<flexbox-item >
				<div class="btn bgred" v-on:click="share()">
					分享
				</div>
			</flexbox-item>
		</flexbox>


		<div class="lyx_mcover" v-show="zhezhao" v-on:click="clickzhezhao()">
			<img :src="URL.shareBgImg" >
		</div>
	


	
	</div>
	</transition>
	
	<!-- <load-more v-if="showLoading" tip="正在加载"></load-more> -->

<!-- </div> -->
</template>

<script>

import { mapGetters, mapActions } from 'vuex';
import count from '../util/count';
import pricecalendar from '../util/pricecalendar';
import poster from '../util/poster';
import wx from '../../util/weixin';
import QrcodeVue from 'qrcode.vue';
import { LoadMore, Group, Cell } from 'vux'

import { cutQueryString, cutImage, changeImg } from '../../util/util';

import { productDetails } from '../../service/api';

export default {

	name : 'productInfo',

	data () {
		return {

			topPic : [],

			productdata : {},

			showLoading: true, //显示加载动画

			popupVisible : false,

			shareMenuVisible : false,

			productQRCodeVisible : false,

			materielVisible : false,

			bussinessVisible : false,

			model : {
			},

			pricecalendar : {

			},

			countpara : {
				count : 1,
				max : -1,
			},

			zhezhao : false,

			pricecalendardata : {
				'daypricelist' : [],
				'showattrarr' : [
					{
						'key' : 'guide_price',
						'before' : '¥'
					},
					
					{
						'key' : 'current_stock_num',
						'before' : '余',
					}
				],
			},

			postername : '',

			sharePara : {},
		}
	},

	computed : {

		topPic1 () {
			// var strTopPic = this.productdata.top_pic;
			// return strTopPic ? strTopPic.split(',') : [];

			var arrTopPic = [];

			if(this.productdata.top_pic == undefined) {
				arrTopPic = [];
			}else{
				try{
					var ttt = JSON.parse(this.productdata.top_pic);
					for(var i = 0; i < ttt.length; i++){
						arrTopPic.push(changeImg(ttt[i].url, 'nomal'));
					}
				}catch(err){
					//console.log(err);
					arrTopPic = [];
				}
			}

			return arrTopPic;

		},

		words () {
			var strWords = this.productdata.words ;
			return strWords ? strWords.split(',') : [];
		},

		...mapGetters([
	      //'productdata',
	      'productmodel',
	      'shareproductmodel',
	      'userdata',
	      'company_code',
	      'URL',
	    ]),

	    u () {
	    	console.log(u);
			return this.$route.query.u;
		},

		detailarr () {
			console.log(this.productdata);
			if(this.productdata.detail != undefined){
				var tmp = JSON.parse(this.productdata.detail);
				for(var i = 0; i < tmp.length; i++){
					var t = tmp[i];
					if(t.type == 'text'){
						t.value = t.value.replace(/\n/g,"<br/>");
					}
				}
				return tmp;
			}else{
				return [];
			}
		},

		shareLink () {
			var link = cutQueryString('u');
			// 去掉/?#/之间的微信加的参数
			link = cutQueryString('from', 'before', link);

			//一级，二级分销商，最高权限带openid，普通用户不带openid
			if(this.userdata.level != 0){
				link += '&u=' + this.userdata.user_base;
			}
			
			console.log(link);
			return link;
		},

		bn () {
			return this.productdata.bookingnotes ? 
			this.productdata.bookingnotes.replace(/\n/g,"<br/>") : '';
		},

	},

	methods : {
		buy () {
			this.popupVisible = true;
		},

		next () {

			if(this.model.attr_id == undefined){
				return;
			}

			if(this.productdata.price_type == '1'
			&& this.pricecalendar.id == undefined){
				return;
			}

			console.log('next');
			console.log(this.$route.query.u);
			// alert(this.productdata.name + '-' + this.model.attr_name + '-' + 
			// 	this.countpara.count);

			var q = {
				'sale_code': this.productdata.code,
				'porduct_name' : this.productdata.name,
				//'product_pic' : this.topPic[0],
				'max' : this.countpara.max,

				//型号信息
				'attr_id' : this.model.attr_id,
				'attr_name' : this.model.attr_name,
				'guide_price' : this.model.guide_price,

				//游客信息
				'num' : this.countpara.count,
				'company_code' : this.company_code,

				//要支付到的机构
				'pay_company_code' : this.productdata.out_sale_company,

				//其他需要填写的信息状态
				'tour_date_type' : this.productdata.price_type == '0' ? this.productdata.tour_date_type : this.pricecalendar.date,
				'cardno_state' : this.productdata.cardno_state,

				'product_attr' : this.productdata.product_attr,
			}

			if(q.product_attr == '3'){
				q['postage'] = this.productdata.postage;
			}

			if(q.tour_date_type == '1'){
				if(this.productdata.tour_date_limit_start){
					q['tour_date_start'] = this.productdata.tour_date_limit_start;
				}
				if(this.productdata.tour_date_limit_end){
					q['tour_date_end'] = this.productdata.tour_date_limit_end;
				}
			}


			if(this.$route.query.u != undefined){
				q['u'] = this.$route.query.u;
			}

			console.log(q);

			this.$router.push({ 
				name: 'makeorder', 
				query: q,
			})
		},


		chooseModel (m) {
			console.log(m);

			//this.number = 1;
			this.countpara.count = 1;

			if(this.model.attr_id == m.attr_id){
				this.model = {};
				this.countpara.max = -1;
				this.pricecalendardata.daypricelist = [];
			}else{
				this.model = m;
				this.pricecalendardata.daypricelist = m.daypricelist;
				// if(m.stock_type == '1'){
				// 	this.countpara.max = m.current_stock_num;
				// }else{
				// 	this.countpara.max = -1;
				// }
				this.countpara.max = m.stock_type == '1' ? m.current_stock_num : -1;
			}
		},

		share () {
			console.log('adsasdasdasdasd');
			this.shareMenuVisible = true;
		},

		async shareFriend () {
			console.log('shareFriend');

			// const rr = await wx.weixinShare2(this.sharePara, () => {
			// 	console.log('开始分享');
				
			// }, () => {
			// 	console.log('分享成功');
			// });

			// console.log('开始分享111');

			this.zhezhao = true;
		},

		clickzhezhao () {
			this.zhezhao = false;
		},

		showposterVisible () {
			this.posterVisible = true;
		},

		cancelPoster () {
			this.posterVisible = false;
		},

		poster () {
			console.log('海报');

			var para = {
				'poster_id' : this.productdata.share_id,
				'title' : this.userdata.nickname,
				'qr_data' : this.shareLink,
			};

			this.$dialog.confirm({

				'title' : '自定义名字',

				'mes' : '<input id="pname" style="height: 1rem;border: none;font-size: .3rem;justify-content: flex-start;-webkit-box-align: center;align-items: center;text-align: left;vertical-align: baseline;border-radius: 0;"   placeholder="请输入海报名字">',

				'opts': [
					{
                        txt: '取消',
                        color: false,
                        callback: () => {
                            console.log('取消');
                        }
                    },
                    {
                        txt: '使用微信名',
                        color: false,
                        callback: () => {
                            console.log('用微信名');
							this._getposter(this.userdata.nickname);
                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            console.log('自定义名字');
                            var tt = document.getElementById('pname').value;
					  		//para.title = tt;
					  		this._getposter(tt);
                        }
                    }
                ]
			});
		},

		productQRCode () {
			this.shareMenuVisible = false;
			this.productQRCodeVisible = true;
		},

		_getposter (para) {

			this.postername = para;

			this.shareMenuVisible = false;
			this.productQRCodeVisible = true;
		},

		copyShareLink () {
			console.log(this.shareLink);
			this.$dialog.alert({'mes' : '复制成功'});
		},

		onErrorShareLink () {
			console.log('无法复制链接');
			this.$dialog.alert({'mes' : '无法复制链接'});
		},

	    chooseday (item) {
	    	console.log('chooseday');
	    	console.log(item);
	    	this.model.guide_price = item.data.guide_price;

	    	this.countpara.max = item.data.current_stock_num;

	    	this.pricecalendar = item.data;
	    },

		checkDate(d) {
          	return new Date(d.replace(/-/g,'/')).getTime() > new Date().getTime() ;
      	},

      	materiel () {
      		console.log('物料');

      		this.materielVisible = true;
      	},

      	copyWords (w) {
			this.$dialog.alert({'mes' : '复制成功'});
      	},


      	pimg (url, what) {
      		return changeImg(url, what);
      	},


      	initData1 () {

      		const para = {
      			fun : 'productDetails1',
      			product_code : this.$route.params.code,
      			cb : async (res) => {
      				this.productdata = res;

      				this.showLoading = false;

      				//要分享的图。
      				var img = this.URL.defaultImg;

      				if(this.productdata.top_pic == undefined) {
						this.topPic = [this.URL.defaultImg];
					}else{
						try{
							var ttt = JSON.parse(this.productdata.top_pic);
							for(var i = 0; i < ttt.length; i++){
								this.topPic.push(changeImg(ttt[i].url, 'normal'));
								if(i == 0){
									img = cutImage(ttt[i]);
								}
							}
						}catch(err){
							//console.log(err);
							this.topPic = [this.URL.defaultImg];
						}
					}

					//this.hideLoading();
					

					var desc = '';
					if(this.productdata.detail){
						var details = JSON.parse(this.productdata.detail);
						for(var i = 0; i < details.length; i++){
							var tmp = details[i];
							if(tmp.type === 'text'){
								desc = tmp.value;
								break;
							}
						}
					}

					var para = {
						'name' : this.productdata.name,
						'img' : img,
						'desc' : desc,
						'link' : this.shareLink,
						'company_code' : this.company_code,
					};

					this.sharePara = para;

					//wx.weixinShare(this.productdata, () => {
					await wx.weixinShare1(para, () => {
						console.log('开始分享');
						
					}, () => {
						console.log('分享成功');
					}, this.URL.ios);


					

      			}
      		};

      		this.$store.dispatch('update', para);
      	},

      	async initData() {

      		var res = await productDetails(this.$route.params.code);

      		if(res.errcode != 0){
      			return ;
      		}

			console.log('res');
			console.log(res);

			this.productdata = res.data;

			//var arrTopPic = [];

			if(this.productdata.top_pic == undefined) {
				this.topPic = [this.URL.defaultImg];
			}else{
				try{
					var ttt = JSON.parse(this.productdata.top_pic);
					for(var i = 0; i < ttt.length; i++){
						this.topPic.push(ttt[i].url);
					}
				}catch(err){
					//console.log(err);
					this.topPic = [this.URL.defaultImg];
				}
			}

			//this.hideLoading();
			this.showLoading = false;


			//注册分享方法
			//if(this.userdata.fx_level == '1' || this.userdata.fx_level == '2' ){
				// res['u'] = this.userdata.user_base;
				// res['company_code'] = this.company_code;
				
				var img = '';
				if(res.data.top_pic == undefined || res.data.top_pic == ''){
					img = this.URL.defaultImg;
				}else{
					try{
						var ttt = JSON.parse(res.data.top_pic);
		                img = cutImage(ttt[0]);
					} catch (err) {
						img = this.URL.defaultImg;
					}
				}

				var desc = '';
				if(res.data.detail){
					var details = JSON.parse(res.data.detail);
					for(var i = 0; i < details.length; i++){
						var tmp = details[i];
						if(tmp.type === 'text'){
							desc = tmp.value;
							break;
						}
					}
				}

				var para = {
					'name' : res.data.name,
					'img' : img,
					'desc' : desc,
					'link' : this.shareLink,
					'company_code' : this.company_code,
				};

				//wx.weixinShare(this.productdata, () => {
				wx.weixinShare(para, () => {
					console.log('开始分享');
				}, () => {
					console.log('分享成功');
				});
			//}  		

      	},


      	bussinessinfo () {
      		this.bussinessVisible = true;
      	},

      	gohome () {
      		this.$router.push({ 
	          name: 'home', 
	          query : { 'company_code' : this.company_code},
	        });
      	},

      	goorder () {
      		this.$router.push({ 
	          name: 'orderlist', 
	          query : { 'company_code' : this.company_code},
	        });
      	},

      	collection () {
      		let fun = '';
      		if(this.productdata.iscollection == '0'){
      			fun = 'createCollection';
      		}else{
      			fun = 'deleteCollection';
      		}
      		const para = {
      			fun ,
      			product_code : this.productdata.code,
      			cb : res => {
      				if(fun == 'createCollection'){
      					this.productdata.iscollection = this.productdata.code;
      				}else{
      					this.productdata.iscollection = '0';
      				}
      				
      				console.log(res);
      			}
      		};

      		this.$store.dispatch('update', para);
      	}


	},

	components : {
		count,
		QrcodeVue,
		//Previewer,
		pricecalendar,
		LoadMore,
		Group,
		Cell,
		poster,
	},

	// directives: {
	//     TransferDom,
	// },

	mounted () {

		var u = this.$route.query.u;

		//1,如果链接带u参数，说明是通过二维码或链接访问的，需要把u传回去，获取改分销商可以卖的型号。
		var para_model = {
			'code' : this.$route.params.code,
		};

		if(u){
			para_model['openid'] = u;
		}

		//获取普通产品的型号
		//如果地址里有openid，得到的是该openid可以分销的型号。
		//如果地址里没有openid，得到的是该产品所有型号。
		this.$store.dispatch('getProductModel', para_model);


		//如果是分销商，获取可以分享的型号列表
		if(this.userdata.level != '0'){
			para_model['openid'] = this.userdata.user_base;
			this.$store.dispatch('getShareProductModel', para_model);
		}

		this.initData1();
	},

	created () {
		//设置粉丝
		if(this.$route.query.u != undefined){
			this.$store.dispatch('createFans', { 'openid' : this.$route.query.u});
		}

		//this.initData();
	}

}


</script>

<style scoped>

#productinfo {
	padding-bottom: 60px;
}

.name {
	color: #333;
    font-size: .32rem;
    /*margin-right: .2rem;*/
}

.price {
	padding : 10px 0;
	color: red;
	font-size : 24px;
}

.tips1 {
	border: 1px solid #c85536;
	border-radius : 4px;
	font-size: 12px;
	padding:2px 5px;
	margin-bottom: 5px;
	color: #c85536;
}

.tips2 {
	border: 1px solid green;
	border-radius : 4px;
	font-size: 12px;
	padding:2px 5px;
	margin-bottom: 5px;
	color: green;
}

.bookingnotestitle, .detailtitle {
	border-bottom: 1px solid #e2e2e2;
	/*padding-left: 10px;*/
	padding-bottom: 5px;
	font-size: .27rem;
	line-height: .45rem;
}

.bookingnotes, .detail {
	/*padding: 10px;*/
	padding-top: 10px;
	font-size: .27rem;
}

.share {
	height: 50px;
	width: 100%;
    position:fixed;
    bottom:90px;
    float: right;
    z-index: 999;
}

.share .btn {
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 25px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	border-radius : 25px;
}

.footer2 {
	height: 50px;
	width: 100%;
	line-height: 50px;
	/*background-color: #eee;*/
    position:fixed;
    bottom:0;
    z-index: 999;
}

.footer {
	/*height: 50px;*/
	/*width: 100%;*/
	background-color: #fff;
    position:fixed;
    bottom:0;
    z-index: 999;
}

.footer .buy{
	float: right;
	width: 100%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #fff;

}

.footer .buy1{
	float: right;
	width: 100%;
	text-align: center;
	height: 50px;
	/*line-height: 10px;*/
	color: #fff;

}

.popmodel {
	width: 100%;
	/*height: 300px;*/
	z-index: 9999;

	padding-bottom: 60px;
}

.popmodel .footer1{
	/*height: 50px;*/
	width: 100%;
    position:fixed;
    bottom:0;
  	color: #fff;
  	text-align: center;
  	line-height: 50px;

}

.popmodel .unavailable {
	color: #fff;
	background-color: #ededed;
}

.popmodel .image{
	width: 25%;
	text-align: center;
	background-color: #fff;
}

.popmodel .name1 {
	width:75%;
	word-wrap:break-word;
}

.popmodel .guide_price {
	font-size: 28px;
}

.popmodel .model{
	float: left;
	padding: 5px 18px;
	margin : 5px 10px;
	background-color: #eee;
	border-radius : 10px;
}

.popmodel .stock {
	width: 100px;
}

.popmodel .stock .count {
	font-size: 14px;
	color: #666;
}

.bb {
	border-bottom: 1px solid #ddd;
}

.popmodel .active{
	background-color: #FF5E53;
	color: #fff;
}

.shareMenu {
	width: 100%;
	z-index: 9999;
	/*padding-left:10px;
	padding-right:10px;*/
	/*text-align: center;*/
	/*height: 100px;*/
}

.shareMenu .btn {
	font-size: .28rem;
	text-align: center;
	padding: 10px 0;
	border-top : 1px solid #eee;
}

/*.productQRCode {
	width: 220px;
	height: 210px;
	padding-top : 10px;
}*/

.postername {

	height: 200px;
	background-color: #fff;
}


/*分享功能*/
.lyx_mcover{ position: fixed; top:0;  left:0; width:100%; height:100%;background:rgba(0, 0, 0, 0.7);z-index:20000;}
.lyx_mcover img {position: fixed;right: 18px;top:5px;width: 260px;height: 180px;z-index:20001;}



.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}


</style>